<template>
  <div>
    <div class="recordcards">
      <div class="contheader">
        <div class="img-bg img-bgc">
          <img src="../../../static/images/duty.png" alt>
        </div>
        <p>今日值班医生</p>
      </div>
      <ul class="chgbedcont">
        <li v-for="(item,index) in namelist" :key="index" class="f-clear docli">
          <p class="f-left duty">{{item.douctor}}</p>
          <p class="f-right">{{item.name}}</p>
        </li>
      </ul>
    </div>
    <div class="recordcards">
      <div class="contheader">
        <div class="img-bg img-bgc1">
          <img src="../../../static/images/changebed.png" alt>
        </div>
        <p>换床信息</p>
      </div>
      <ul class="chgbedcont">
        <li v-for="(item,index) in changebedlist" :key="index" class="f-clear changli">
          <p class="f-left duty">{{item.name}}</p>
          <div class="f-right">
            <span class="span-circle img-bgc">{{item.num}}</span>
            <div class="bg-middle"></div>
            <span class="span-circle img-bgc1">{{item.newnum}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="contfooter recordcards">
      <div class="contheader">
        <div class="img-bg img-bgc2">
          <img src="../../../static/images/memo.png" alt>
        </div>
        <p>备忘录</p>
      </div>
      <ul class="memoul">
        <li class="memoli" v-for="(item,index) in memolist" :key="index">
          <p class="circle-li"></p>
          <p class="momep">{{item.memo}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      namelist: [
        { douctor: '值班医生', name: '刘谢荣' },
        { douctor: '值班医生', name: '刘谢荣' },
        { douctor: '值班医生', name: '刘谢荣' },
        { douctor: '值班医生', name: '刘谢荣' },
        { douctor: '值班医生', name: '刘谢荣' }
      ],
      changebedlist: [
        { name: '刘谢荣', num: 42, newnum: 45 },
        { name: '刘谢荣', num: 42, newnum: 45 },
        { name: '刘谢荣', num: 42, newnum: 45 },
        { name: '刘谢荣', num: 42, newnum: 45 }
      ],
      memolist: [
        { memo: '联系31床家属，下午及时详谈手术事宜' },
        { memo: '联系31床家属，下午及时详谈手术事宜' },
        { memo: '联系31床家属，下午及时详谈手术事宜' },
        { memo: '联系31床家属，下午及时详谈手术事宜' },
        { memo: '联系31床家属，下午及时详谈手术事宜' }
      ]
    }
  },
  components: {}
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/comm.css';

.recordcards {
  margin-bottom: 0.3rem;
  padding: 0.2rem 0.25rem 0.2rem 0.2rem;
  background-color: #fff;
  border-radius: 0.15rem;
  box-shadow: 0 0 0.1rem #e9edf2;
}

.img-bgc {
  background-color: #29b8ff;
}

.img-bgc1 {
  background-color: #57d9a0;
}

.img-bgc2 {
  background-color: #ffb049;
}

.contheader {
  height: 0.36rem;

  .img-bg {
    display: inline-block;
    width: 0.36rem;
    height: 0.36rem;
    text-align: center;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    vertical-align: middle;
    margin-right: 0.2rem;
    img{
      width: 100%;
      height: 100%;
    }
  }

  p {
    display: inline-block;
    font-size: 0.28rem;
    color: #021233;
    vertical-align: middle;
  }
}

.chgbedcont {
  height: 1.96rem;
  max-height: 1.96rem;
  overflow-y: auto;
  margin-top: 0.2rem;

  .docli {
    margin-bottom: 0.15rem;
  }

  .changli {
    margin-bottom: 0.18rem;
  }

  .duty {
    color: #7c8598;
    font-size: 0.24rem;
  }

  .li-name {
    color: #000;
    font-size: 0.24rem;
  }

  .span-circle {
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    vertical-align: middle;
    font-size: 0.24rem;
    color: #fff;
    line-height: 0.3rem;
    text-align: center;
  }

  .bg-middle {
    display: inline-block;
    width: 0.1rem;
    height: 0.16rem;
    background-image: url('../../../static/images/triangle.png');
    background-size: 100%;
    vertical-align: middle;
    margin: 0 0.15rem;
  }
}

.contfooter {
  margin: 0;

  .memoul {
    height: 2rem;
    max-height: 2rem;
    overflow-y: auto;
    margin-top: 0.2rem;

    .memoli {
      display: flex;
      margin-bottom: 0.3rem;

      .circle-li {
        width: 0.12rem;
        height: 0.12rem;
        border-radius: 50%;
        background-color: #ffb049;
        margin: 0.1rem 0.1rem 0 0;
        vertical-align: middle;
      }

      .momep {
        // display: inline-block;
        font-size: 0.24rem;
        line-height: 0.35rem;
        color: #1c1c1c;
        vertical-align: middle;
      }
    }
  }
}
</style>
